<template>
	<view class="index">
		<view class="mask" v-show="showMask" @click="hide"></view>
		<swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item, index) of productVO.productImgs" :key="index" :data-index="index">
				<image :src="item" background-size="cover" />
			</swiper-item>
		</swiper>
		<view class="service-policy">
			<view class="item">7天无忧退货</view>
			<view class="item">48小时快速退款</view>
			<view class="item">满99元免邮费</view>
		</view>
		
		<view class="goods-info">
			
			<view class="c">
				
				<text class="name" >{{productVO.productName}}</text>
				<!-- <view class="uni-flex uni-column" style="justify-content: center;align-content: center;text-align: center;">
					
					
				</view> -->
				<view class="uni-flex uni-row" style="justify-content: space-between;" >
					<view class="uni-flex uni-row" >
					<text class="uni-text-gray uni-text-line-through" style="width: 100upx;">￥{{productVO.maxPrice}}</text>
					<text class="price" style="width: 100upx;">￥{{productVO.minPrice}}</text>
					</view>
					<text class="uni-icon uni-icon-share" style="font-size: 30upx;" ></text>
				
				</view>
			</view>
		</view>
		<!-- 		<view class="section-nav section-act">
			<view class="t">
				<view class="label">1个促销:</view>
				<view class="tag">万圣趴</view>
				<view class="text">全场满499，额外送糖果</view>
			</view>
			<image class="i" src="/static/images/address_right.png" background-size="cover" />
		</view> -->
		<view class="section-nav section-attr" @click="show" data-position="params">
			<!-- <view class="t">商品参数</view>
			<view class="l">
				<view class="item" v-for="(item, index) of productVO.productFeatures" :key="item.name" :data-index="index">
					<text class="left">{{item.description}}</text>
					<text class="right">{{item.productFeatureId}}</text>
				</view>
			</view> -->
			<view class="t">商品参数</view>
			<image class="i" src="../../static/image/address_right.png" background-size="cover" />
		</view>
		<view class="section-nav section-attr" @click="show" data-position="attrs" >
			<view class="t">请选择规格数量</view>
			<image class="i" src="../../static/image/address_right.png" background-size="cover" />
		</view>
		<view class="comments" v-if="productReviews.total > 0">
			<view class="h">
				<view @tap="goToComment">
					<text class="t">评价({{productReviews.total > 999 ? '999+' : productReviews.total}})</text>
					<text class="i">查看全部</text>
				</view>
			</view>
			
			<view class="b">
				<view class="item">
					<view class="info">
						<view class="user">
							<image :src="productReviews.data.baseUrl+ productReviews.data.imgUrl" />
							<text>{{productReviews.data.nickname}}</text>
						</view>
						<view class="time">{{productReviews.data.createdStamp}}</view>
					</view>
					<view class="content">
						{{productReviews.data.productReviewContent}}
					</view>
					<view class="imgs" v-if="productReviews.data.productReviewImages.length > 0">
						<image class="img" v-for="(item, index2) of productReviews.data.productReviewImages" :key="index2" :data-index="index2"
						 :src="productReviews.data.baseUrl +'/'+ item.original">
						</image>

					</view>
				</view>
			</view>
		</view>
		<view class="good-detail">
			<text>商品详情</text>
			<image align="middle" mode="widthFix"   v-for="(item, index6) of productVO.dataResources" :key="item.id" :data-index="index6"   :src="item.objectInfo"   />
		</view>
		
		<view class="popup popup-bottom" v-show="showState.params">
			<view class="attr-pop-box">
			<view class="goods-attr" >
				<view class="t">商品参数</view>
				<view class="l">
					<view class="item" v-for="(item, index7) of productVO.params" :key="item.key" :data-index="index7">
						<text class="left">{{item.key}}</text>
						<text class="right">{{item.value}}</text>
					</view>
				</view>
				<view class="bottom-btn">
					
					<view class="full-btn" @click="hide">确定</view>
				</view>
			</view>
			</view>
		</view>
		<view class="popup popup-bottom" v-show="showState.attrs" >
			<view class="attr-pop-box">
				<view class="attr-pop">
					<view class="close" @click="hide">
						<image class="icon" src="../../static/image/icon_close.png" @click="hide" />
					</view>
					<view class="img-info">
						<!-- <image class="img" :src="optionsImageUrl" />
						<view class="info">
							<view class="c">
								
								<view class="uni-flex uni-row" width="420upx">
									<view class="text" style="width: 10upx;"></view>
									<view class="uni-ellipsis" style="flex: 1;" >{{productVO.productName}}</view>
									<view class="text" style="width: 200upx;">价格：￥{{actualPrice}}</view>
								</view>
								<view class="a" v-if="productFeatureDescription.length > 0" >已选择：{{productFeatureDescription}}</view>
							</view>
						</view> -->
						<view class="uni-flex uni-row">
							<view class="text" style="width: 150upx;height: 150upx;display: flex; justify-content: center;align-items: center;border: 1px solid #AAAAAA;">
								<image :src="optionsImageUrl" style="width: 100upx;height: 100upx;"></image>
							</view>
							<view class="uni-flex uni-column " style="flex: 1;justify-content: space-between;">
								<view class="text uni-ellipsis" style="text-align: left;padding-left: 20px;padding-top: 10px;" >
									<view class="text uni-ellipsis" >{{productVO.productName}}</view>
									<view class="text" >价格：￥{{actualPrice}}</view>
									<view class="a" v-if="productFeatureDescription.length > 0" >已选择：{{productFeatureDescription}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="spec-con">
						<view class="name">颜色规格</view>
						<view class="spec-item" v-for="(item, index11) of productVO.optionFeatureArray" :key="item.productFeatureApplId"
						 :data-index="index11">
							
							<view class="name" :class="item.checked ? 'selected value' : 'value'"  @click="clickSkuValue"  :key="index11" :data-value-id="item.productFeatureApplId" :data-index="index11"  :data-name-id="item.objectInfo">{{item.description}}</view>
						</view>
						<view class="number-item">
							<view class="name" style="left: 0;">数量</view>
							<view class="selnum">
								<view class="cut" @click="cutNumber">-</view>
								<input :value="quantity" class="number" disabled="true" type="number" />
								<view class="add" @click="addNumber">+</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-btn">
					<view class="pl" @click="createOrder">立即购买</view>
					<view class="pr" @click="addToCart" >加入购物车</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn">
			<!-- #ifdef APP-PLUS -->
			<view class="l l-collect" @click="openKeFu">
				<!-- <image class="icon" :src="collectBackImage" /> -->
				<view class="icon uni-icon uni-icon-erjikefu" style="font-size:40upx" ></view>
			
			</view>
			<!-- #endif -->
			
			<view class="l l-collect" @click="addCannelCollect">
				<view class="icon uni-icon uni-icon-shoucang2" style="font-size:44upx" v-if="productVO.collect == false"></view>
				<view class="icon uni-icon uni-icon-favoritesfilling uni-text-waning" style="font-size:44upx" v-if="productVO.collect == true"></view>
				<!-- <image class="icon" :src="collectBackImage" /> -->
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="l l-cart">
				<view class="box">
					<text class="cart-count">{{cartLength}}</text>
					<image @click="openCartPage" class="icon" src="../../static/image/ic_menu_shoping_nor.png" ></image>
				</view>
			</view>
			<!-- #endif -->
			<view class="c" @click="show" data-position="attrs">加入购物车</view>
			<view class="r" @click="show" data-position="attrs">立即购买</view>
		</view>
	</view>
</template>

<script>
	import wxParse from '../../components/mpvue-wxparse/src/wxParse.vue';
	import { mapState,mapMutations,mapGetters } from 'vuex'

	import {
		getProductById,
		getProductReview,
		getProductByCode
	} from '@/api/mall/product';

	import {
		getUrl
	} from '@/common/oss';
	
	import {
		setStore
	} from '@/common/util';
	
	import { appInfo, setDeviceID, setClientType } from '@/common/appinfo'

	export default {
		components: {
			wxParse
		},
		data() {
			return {
				
				paramAttr: false,
				productVO: {
					productId: null,
					productName: null,
					minPrice: 0.0,
					params: [],
					dataResources: [],
					dataResourcesStr: "",
					optionFeatureArray: [],
				},
				productReviews: {
					total: 0,
					data: {
						productReviewImages: [],
						imageUrl: "",
						nickname: "",
						productReviewContent: "",
						productRating: 0,
					}


				},
				productFeatureApplId: "",
				productFeatureDescription: "",
				optionsImageUrl: "",
				checkedSpecText: "",
				actualPrice: 0.0,
				quantity: 1,
				showState: {
					attrs: false,
					params: false,
				},
				activePop: 'attrs'
			};
		},
		onUnload: function() {
			this.showState["attrs"] = false;
			this.showState["params"] = false;
			this.reload = false;
		},
		onLoad: function(e) {
			uni.showLoading({
				title:"加载中...."
			})
			console.log("e.typeId:"+e.typeId)
			this.page = 1;
			this.reload = true;
			if(e.typeId  == 1)
			{
					this.getProduct(e.navigateValue);
					this.getComments(e.navigateValue);
			} else {
				if(e.typeId == 2) {
					this.getProductsByCode(e.navigateValue)
				}
			}
			
		},
		onBackPress: function() {
			console.log("showMask......")
			if(this.showMask) {
				this.showMask = false;
				this.hide();
				return true;
			}
		},
		computed: {
			...mapGetters(
				[ "sum", "cartLength", "hasLogin","userId"]
			),
			...mapState({
					cartItems: state => state.cart.cartItems
			}),
		},
		mounted() {
			console.log("hasLogin:" +this.hasLogin)
		},
		methods: {
			goToComment() {
				uni.navigateTo({
					url: '/pages/mall/comment?valueId=' + this.productVO.productId
				})
			},
			// 跳转到购物车页面
			openCartPage:function () {
			  uni.switchTab({
				url: '/pages/tabBar/cart/index'
			  });
			},
			clickSkuValue: function(event) {
				let objectInfo = event.mp.currentTarget.dataset.nameId;
				if(objectInfo !== undefined && objectInfo.length > 0){
					this.optionsImageUrl = objectInfo;
				}
				this.productFeatureApplId = event.mp.currentTarget.dataset.valueId;
				console.log(this.productFeatureApplId)
				this.productFeatureDescription = this.productVO.optionFeatureArray[event.mp.currentTarget.dataset.index].description;
				console.log(this.productFeatureDescription)
				this.actualPrice = this.productVO.optionFeatureArray[event.mp.currentTarget.dataset.index].price;
				console.log(this.actualPrice)
				for(var i = 0 ; i < this.productVO.optionFeatureArray.length; i++) {
					if(this.productVO.optionFeatureArray[i].productFeatureApplId == this.productFeatureApplId)
					{
						this.productVO.optionFeatureArray[i].checked = true;
					}
					else {
						this.productVO.optionFeatureArray[i].checked = false;
					}
				}
				
			},
			hide: function() {
				this.showMask = false
				this.showState[this.activePop] = false
			},
			show: function(evt) {
				//console.log("dataset:"+JSON.stringify(evt.mp.currentTarget.dataset));
				var pos = evt.mp.currentTarget.dataset.position;
				this.activePop = pos;
				this.showMask = true
// 				console.log("show:"+ pos);
// 				console.log("showMask:"+ this.showMask);
				this.showState[pos] = true
				// console.log(JSON.stringify(this.showState))
			},
			getProduct: function(id) {
				var that = this;
				getProductById(id).then(res => {
						this.showProduct(res)
				}).catch(err => {
					uni.hideLoading()
				});
				

			},
			showProduct(res) {
				
				uni.hideLoading()
				var data = res.data, that = this;
					data.baseUrl = getUrl();
					
					var prices = data.productPrices.sort(function(a, b) {
						return a.price > b.price
					})
					if (prices.length > 0) {
						data.maxPrice = prices[0].price;
						data.minPrice = prices[prices.length - 1].price;
					}

					data.productImgs = [];
					var swipeImages = data.detailImageUrl.split("|;");
					for (var i = 0; i < swipeImages.length; i++) {
						if (swipeImages[i] !== null && swipeImages[i].length > 0) {
							data.productImgs.push(getUrl(swipeImages[i].split(":")[0] + ".tbi"));
						}

					}
					data.params = [];
					if (data.productFeatureTypes !== undefined && data.productFeatureTypes.length > 0) {
						for (var i = 0; i < data.productFeatureTypes.length; i++) {
							var parsm = {
								key: data.productFeatureTypes[i].description
							}
							var val = "";
							for (var c = 0; c < data.productFeatures.length; c++) {
								if (data.productFeatures[c].productFeatureTypeId == data.productFeatureTypes[i].productFeatureTypeId) {
									val += data.productFeatures[c].description + "  "
								}

							}
							parsm.value = val;
							data.params.push(parsm)
						}
					}
					//console.log("productFeatureTypes end"+getUrl(data.originalImageUrl+".tbi"));
					that.optionsImageUrl = getUrl(data.originalImageUrl+".tbi");
					//console.log("originalImageUrl end"+ that.optionsImageUrl);
					//that.productFeatureDescription = data.productName;
					//console.log("productFeatureTypes end");
					that.productFeatureApplId = data.productId;
					data.optionFeatureArray = [];
					that.actualPrice = data.minPrice;
					//console.log("productPricesFeature");
				// 					data.dataResourcesStr = "";
					for (var i = 0; i < data.dataResources.length; i++) {
						data.dataResources[i].objectInfo = getUrl(data.dataResources[i].objectInfo);
						//data.dataResourcesStr += "<IMG align=middle src='" + data.dataResources[i].objectInfo + "' />";

					}
									//data.dataResourcesStr = "<div>" + data.dataResourcesStr + '</div>';
				
					if (data.productPrices !== undefined && data.productPrices.length > 0) {
						for (var i = 0; i < data.productPrices.length; i++) {
							var item = data.productPrices[i];
							if (item.productPriceTypeId == 'FEATURE_PRICE') {
								var optionFeature = {
									objectInfo: '',
									description: '',
									checked: false
								};
								optionFeature.productFeatureApplId = data.productPrices[i].productFeatureApplId;
								console.log("productFeatureApplId:" + data.productPrices[i].productFeatureApplId);
								optionFeature.price = data.productPrices[i].price;
								for (var c = 0; c < data.productFeatures.length; c++) {
									if (data.productFeatures[c].productFeatureApplId == data.productPrices[i].productFeatureApplId) {
										optionFeature.description = optionFeature.description + data.productFeatures[c].description + '  ';
										var featureImgs = data.detailImageUrl.split("|;");
										for (var row = 0; row < featureImgs.length; row++) {
											if (featureImgs[row] !== null && featureImgs[row].length > 0) {
												var indexStr = data.productFeatures[c].productFeatureId + ':' + data.productFeatures[c].productFeatureTypeId;
												if (featureImgs[row].indexOf(indexStr) > 0) {
													optionFeature.objectInfo = getUrl(featureImgs[row].split(":")[0] + ".tbi");
												}
											}
										}
									}
								}
								data.optionFeatureArray.push(optionFeature);
							}
						}
						
						if(data.optionFeatureArray.length > 0)
						{
							that.actualPrice = data.minPrice;
							that.productFeatureDescription = data.optionFeatureArray[0].description;
							data.optionFeatureArray[0].checked = true;
							that.productFeatureApplId = data.optionFeatureArray[0].productFeatureApplId;
							if(data.optionFeatureArray[0].objectInfo.length > 0){
								that.optionsImageUrl = data.optionFeatureArray[0].objectInfo
							}
						}
						
					}
					//console.log("finish");
					this.productVO = data;
					//console.log(JSON.stringify(this.productVO))
			},
			getProductsByCode: function(code) {
				getProductByCode(code).then(res =>  {
					this.showProduct(res)
					this.getComments(this.productVO.productId);
				});
			},
			getComments: function(id) {
				var that = this;
				let query = {};
				query.productId = id;
				query.page = 1;
				query.limit = 1;
				query.orderBy = "createdStamp";
				query.sort = "desc";
				
				getProductReview(query).then(function(response) {
					//console.log("comments" + JSON.stringify(response));
					
					if (response.total > 0 && response.data.length > 0) {
						//console.log("comments ...");
						for (var i = 0; i < response.data.length; i++) {
							response.data[i].baseUrl = getUrl();
						}
						that.productReviews = {
							total: response.total,
							data: response.data[0]
						};
						
					}
					//console.log("productReviews.total"+JSON.stringify(that.productReviews.data))

				});
			},
			addToCart: function() {
				if(!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/security/login"
					})
					return;
				}
				if(this.cartItems.length <= 0) {
					this.$store.dispatch("addCartAction",this.getCartItem());
				} else {
					var index = -1;
					var oldQuantity = 0;
					for(var i= 0; i < this.cartItems.length; i++){
						if(this.cartItems[i].productId == this.productVO.productId && this.cartItems[i].productFeatureApplId ==  this.productFeatureApplId)
						{
							index = i;
							this.cartItems[i].quantity = this.cartItems[i].quantity + this.quantity;
							break;
						} 
					}
					if(index > 0)
					{
						this.$store.dispatch("updateCartAction", {
							cartItem: this.cartItems[i],
							index:i,
							key:"number",
							value:this.cartItems[i].quantity
						});
						
					} else {
						this.$store.dispatch("addCartAction", this.getCartItem());
					}
					
				}
				this.hide();
				
			},
			createOrder: function() {
				if(!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/security/login"
					})
					return;
				}
				console.log(this.quanity)
				var orderHeader = {
					cartId: new Date().getTime(),
					orderTypeId: 'SALES_ORDER',
					statusId: 'ORDER_CREATED',
					//#ifdef APP-PLUS
					terminalId: plus.os.name,
					visitId: appInfo.deviceId,
					//#endif
					productStoreId: this.productVO.productStoreId,
					grandTotal: this.actualPrice * this.quantity,
					productFeatureApplId: this.productFeatureApplId,
					orderName: this.productName,
					productFeatureDescription: this.productFeatureDescription,
					transactionMessage: "",
					orderItems: [ {
						orderItemSeqId: 1,
						orderItemTypeId: 'PRODUCT_ORDER_ITEM',
						isItemGroupPrimary: "Y",
						productId: this.productVO.productId,
						productName: this.productVO.productName,
						productFeatureApplId: this.productFeatureApplId,
						productFeatureApplDesc: this.productFeatureDescription,
						originalImageUrl: this.productVO.originalImageUrl+".tbi",
						attachProps: this.productFeatureDescription,
						quantity: this.quantity,
						cancelQuantity: 0,
						unitListPrice: this.actualPrice,
						statusId: 'ORDER_CREATED',
					}
						
					]
				}
				setStore({
					name: '$sc_temp_order',
					content: orderHeader,
					type: 'session'
					})
				
				uni.navigateTo({
					url: "/pages/buy/checkout?typeId="+1
				})
			},
			getCartItem: function() {
				return {
					partyId: this.userId,
					cartItemId: new Date().getTime(),
					productId: this.productVO.productId,
					productFeatureApplId: this.productFeatureApplId,
					productName: this.productVO.productName,
					productFeatureDescription: this.productFeatureDescription,
					attachFeatures: this.productFeatureDescription,
					productStoreId: this.productVO.productStoreId,
					price: this.actualPrice,
					quantity: this.quantity,
					hasChecked: true,
					orginalImageUrl: this.optionsImageUrl
				}
			},
			// 减少数量
			cutNumber() {
				this.quantity = (this.quantity - 1 > 1) ? this.quantity - 1 : 1;
			},
			// 增加数量
			addNumber() {
				this.quantity = this.quantity + 1;
			},
			//#ifdef APP-PLUS
			openKeFu() {
				if(plus.os.name == 'Android'){
					var main = plus.android.runtimeMainActivity(); 
					var Intent = plus.android.importClass('android.content.Intent'); 
					var Uri = plus.android.importClass('android.net.Uri'); 
					var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin=179326051")); 
					main.startActivity(intent); 
				}
				else if (plus.os.name == 'iOS' ){
					 plus.runtime.launchApplication({  
						 action: "mqq://im/chat?chat_type=wpa&uin=179326051&version=1&src_type=web"  
					   }, function(e) {  
						   plus.nativeUI.confirm("检查到您未安装qq，请先到appstore搜索下载？", function(i) {  
							   if (i.index == 0) {  
								   iosAppstore("itunes.apple.com/cn/app/mqq/");  
							   }  
						   });  
					   });  
				}
			}
			//#endif
		}
	}
</script>

<style>
	@import url("../../components/mpvue-wxparse/src/wxParse.css");

	.index {
		width: 750upx;
	}
	.goodsimgs {
		width: 750upx;
		height: 750upx;
	}

	.goodsimgs image {
		width: 750upx;
		height: 750upx;
		background-color: #eee;
	}
	
	.good-detail {
		width: 750upx;
		background: #fff;
	}
	
	.good-detail text{
		line-height: 108upx;
		font-size: 29upx;
		width: 120upx;
		color: #333;
		margin-left: 31.25upx;
	}
	
	.good-detail image {
		width: 750upx;
		background-color: #eee;
	}

	.service-policy {
		width: 650upx;
		height: 73upx;
		background: #f4f4f4;
		padding: 0 31.25upx;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}

	.service-policy .item {
		background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
			background-size: 10upx;
		padding-left: 15upx;
		display: flex;
		align-items: center;
		font-size: 25upx;
		color: #666;
	}

	.goods-info {
		width: 750upx;
		background: #fff;
		margin-bottom: 20upx;
	}

	.goods-info .c {
		width: 690upx;
		margin-left: 31.25upx;
		padding: 38upx 31.25upx 38upx 0;
		/* border-bottom: 1px solid #f4f4f4; */
	}


	.goods-info .name {
		margin-bottom: 5.208upx;
		font-size: 41upx;
	}

	.goods-info .desc {
		height: 43upx;
		margin-bottom: 41upx;
		font-size: 24upx;
		line-height: 36upx;
		color: #999;
	}

	.goods-info .price {
		height: 35upx;
		font-size: 35upx;
		line-height: 35upx;
		color: #b4282d;
	}

	.goods-info .brand {
		margin-top: 23upx;
		min-height: 40upx;
		text-align: center;
	}

	.goods-info .brand text {
		display: inline-block;
		width: auto;
		padding: 2px 30upx 2px 10.5upx;
		line-height: 35.5upx;
		border: 1px solid #f48f18;
		font-size: 25upx;
		color: #f48f18;
		border-radius: 4px;
		background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
			background-size: 10.75upx 18.75upx;
	}

	.section-nav {
		width: 750upx;
		height: 108upx;
		background: #fff;
		margin-bottom: 20upx;
	}

	.section-nav .t {
		float: left;
		width: 600upx;
		height: 108upx;
		line-height: 108upx;
		font-size: 29upx;
		color: #333;
		margin-left: 31.25upx;
	}

	.section-nav .i {
		float: right;
		width: 52upx;
		height: 52upx;
		margin-right: 16upx;
		margin-top: 28upx;
	}

	.section-act .t {
		float: left;
		display: flex;
		align-items: center;
		width: 600upx;
		height: 108upx;
		overflow: hidden;
		line-height: 108upx;
		font-size: 29upx;
		color: #999;
		margin-left: 31.25upx;
	}

	.section-act .label {
		color: #999;
	}

	.section-act .tag {
		display: flex;
		align-items: center;
		padding: 0 10upx;
		border-radius: 3px;
		height: 37upx;
		width: auto;
		color: #f48f18;
		overflow: hidden;
		border: 1px solid #f48f18;
		font-size: 25upx;
		margin: 0 10upx;
	}

	.section-act .text {
		display: flex;
		align-items: center;
		height: 37upx;
		width: auto;
		overflow: hidden;
		color: #f48f18;
		font-size: 29upx;
	}

	.comments {
		width: 720upx;
		height: auto;
		padding-left: 30upx;
		background: #fff;
		margin: 20upx 0;
	}

	.comments .h {
		height: 102.5upx;
		line-height: 100.5upx;
		width: 704upx;
		padding-right: 16upx;
		border-bottom: 1px solid #d9d9d9;
	}

	.comments .h .t {
		display: block;
		float: left;
		width: 50%;
		font-size: 38.5upx;
		color: #333;
	}

	.comments .h .i {
		display: block;
		float: right;
		width: 164upx;
		height: 100.5upx;
		line-height: 100.5upx;
		background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
			background-size: 52upx;
	}

	.comments .b {
		height: auto;
		width: 720upx;
	}

	.comments .item {
		height: auto;
		width: 720upx;
		overflow: hidden;
	}

	.comments .info {
		height: 127upx;
		width: 100%;
		padding: 33upx 0 27upx 0;
	}

	.comments .user {
		float: left;
		width: auto;
		height: 67upx;
		line-height: 67upx;
		font-size: 0;
	}

	.comments .user image {
		float: left;
		width: 67upx;
		height: 67upx;
		margin-right: 17upx;
		border-radius: 50%;
	}

	.comments .user text {
		display: inline-block;
		width: auto;
		height: 66upx;
		overflow: hidden;
		font-size: 29upx;
		line-height: 66upx;
	}

	.comments .time {
		display: block;
		float: right;
		width: auto;
		height: 67upx;
		line-height: 67upx;
		color: #7f7f7f;
		font-size: 25upx;
		margin-right: 30upx;
	}

	.comments .content {
		width: 720upx;
		padding-right: 30upx;
		line-height: 45.8upx;
		font-size: 29upx;
		margin-bottom: 24upx;
	}

	.comments .imgs {
		width: 720upx;
		height: auto;
		margin-bottom: 25upx;
	}

	.comments .imgs .img {
		height: 150upx;
		width: 150upx;
		margin-right: 28upx;
	}

	.comments .spec {
		width: 720upx;
		padding-right: 30upx;
		line-height: 30upx;
		font-size: 24upx;
		color: #999;
		margin-bottom: 30upx;
	}

	.goods-attr {
		padding: 0 31.25upx 25upx 31.25upx;
		background: #fff;
		width: 750upx;
		height: auto;
		max-height: 780upx;
		padding: 31.25upx;
		background: #fff;
		position: fixed;
		z-index: 9;
		bottom: 100upx;
		overflow-y: auto;
	}

	.goods-attr .t {
		width: 650upx;
		height: 104upx;
		line-height: 104upx;
		font-size: 38.5upx;
		margin-left: 10upx;
	}

	.goods-attr .item {
		width: 650upx;
		height: 68upx;
		padding: 5upx 10upx;
		margin-bottom: 11upx;
		background: #f7f7f7;
		font-size: 38.5upx;
		margin-left: 10upx;
	}

	.goods-attr .left {
		float: left;
		font-size: 25upx;
		width: 100upx;
		height: 45upx;
		line-height: 45upx;
		overflow: hidden;
		color: #999;
	}

	.goods-attr .right {
		float: left;
		font-size: 30upx;
		margin-left: 10upx;
		width: 480upx;
		height: 45upx;
		line-height: 45upx;
		overflow: hidden;
		color: #333;
	}

	.detail {
		width: 750upx;
		height: auto;
		overflow: hidden;
	}

	.detail image {
		width: 750upx;
		display: block;
	}

	.common-problem {
		width: 750upx;
		height: auto;
		overflow: hidden;
	}

	.common-problem .h {
		position: relative;
		height: 145.5upx;
		width: 750upx;
		padding: 56.25upx 0;
		background: #fff;
		text-align: center;
	}

	.common-problem .h .line {
		display: inline-block;
		position: absolute;
		top: 72upx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 225upx;
		width: 300upx;
		background: #ccc;
	}

	.common-problem .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125upx;
		left: 0;
		z-index: 3;
		height: 33upx;
		margin-left: 285upx;
		width: 180upx;
		background: #fff;
	}

	.common-problem .b {
		width: 720upx;
		height: auto;
		overflow: hidden;
		padding: 0upx 30upx;
		background: #fff;
	}

	.common-problem .item {
		height: auto;
		overflow: hidden;
		padding-bottom: 25upx;
	}

	.common-problem .question-box .spot {
		float: left;
		display: block;
		height: 8upx;
		width: 8upx;
		background: #b4282d;
		border-radius: 50%;
		margin-top: 11upx;
	}

	.common-problem .question-box .question {
		/* float: left; */
		line-height: 30upx;
		padding-left: 20upx;
		display: block;
		font-size: 26upx;
		padding-bottom: 15upx;
		color: #303030;
	}

	.common-problem .answer {
		line-height: 36upx;
		padding-left: 16upx;
		font-size: 26upx;
		color: #787878;
	}

	.related-goods {
		width: 750upx;
		height: auto;
		overflow: hidden;
	}

	.related-goods .h {
		position: relative;
		height: 145.5upx;
		width: 750upx;
		padding: 56.25upx 0;
		background: #fff;
		text-align: center;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .h .line {
		display: inline-block;
		position: absolute;
		top: 72upx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 225upx;
		width: 300upx;
		background: #ccc;
	}

	.related-goods .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125upx;
		left: 0;
		z-index: 3;
		height: 33upx;
		margin-left: 285upx;
		width: 200upx;
		background: #fff;
	}

	.related-goods .b {
		width: 750upx;
		height: auto;
		overflow: hidden;
	}

	.related-goods .b .item {
		float: left;
		background: #fff;
		width: 312upx;
		height: auto;
		overflow: hidden;
		text-align: center;
		padding: 15upx 31.25upx;
		border-right: 1px solid #f4f4f4;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .item .img {
		width: 311.45upx;
		height: 311.45upx;
	}

	.related-goods .item .name {
		display: block;
		width: 311.45upx;
		height: 35upx;
		margin: 11.5upx 0 15upx 0;
		text-align: center;
		overflow: hidden;
		font-size: 30upx;
		color: #333;
	}

	.related-goods .item .price {
		display: block;
		width: 311.45upx;
		height: 30upx;
		text-align: center;
		font-size: 30upx;
		color: #b4282d;
	}

	.bottom-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 750upx;
		height: 100upx;
		display: flex;
		background: #fff;
	}
	
	.bottom-btn .full-btn {
		float: left;
		height: 100upx;
		line-height: 96upx;
		width: 750upx;
		border: 1px solid #b4282d;
		background: #b4282d;
		flex: 1;
		text-align: center;
		color: #fff;
	}
	.bottom-btn .l {
		float: left;
		height: 100upx;
		width: 100upx;
		border: 1px solid #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-btn .l.l-collect {
		border-right: none;
		border-left: none;
		text-align: center;
	}

	.bottom-btn .l.l-cart .box {
		position: relative;
		height: 60upx;
		width: 60upx;
	}

	.bottom-btn .l.l-cart .cart-count {
		height: 28upx;
		width: 28upx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		background: #b4282d;
		text-align: center;
		font-size: 18upx;
		color: #fff;
		line-height: 28upx;
		border-radius: 50%;
	}
	
	

	.bottom-btn .l.l-cart .icon {
		position: absolute;
		top: 10upx;
		left: 0;
	}

	.bottom-btn .l .icon {
		display: block;
		border-top: 1px solid #f4f4f4;
		border-bottom: 1px solid #f4f4f4;
		height: 44upx;
		width: 44upx;
	}

	.bottom-btn .c {
		float: left;
		height: 100upx;
		line-height: 96upx;
		width: 200upx;
		flex: 1;
		text-align: center;
		color: #333;
		border-top: 1px solid #f1c40f;
		border-bottom: 1px solid #f1c40f;
		background: #f1c40f;

	}

	.bottom-btn .r {
		
		border: 1px solid #b4282d;
		background: #b4282d;
		float: left;
		height: 100upx;
		width: 200upx;
		line-height: 96upx;
		flex: 1;
		text-align: center;
		color: #fff;
	}
	
	.bottom-btn .pl {
		float: left;
		height: 100upx;
		line-height: 96upx;
		width: 50%;	
		border: 1px solid #b4282d;
		background: #b4282d;

		flex: 1;
		text-align: center;
		color: #fff;
	}
	
	.bottom-btn .pr {
		border: 1px solid #f1c40f;
		background: #f1c40f;
		float: left;
		height: 100upx;
		line-height: 96upx;
		flex: 1;
		text-align: center;
		color: #fff;
	}

	.attr-pop-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .5);
		z-index: 8;
		bottom: 0;
		/* display: none; */
	}

	.attr-pop {
		width: 100%;
		height: auto;
		max-height: 780upx;
		padding: 31.25upx;
		background: #fff;
		position: fixed;
		z-index: 9;
		bottom: 100upx;
		overflow-y: auto;
	}

	.attr-pop .close {
		position: absolute;
		width: 48upx;
		height: 48upx;
		right: 60upx;
		overflow: hidden;
		top: 10upx;
	}

	.attr-pop .close .icon {
		width: 48upx;
		height: 48upx;
	}

	.attr-pop .img-info {
		width: 687.5upx;
		height: 177upx;
		overflow: hidden;
		top: -10upx;
		margin-bottom: 41.5upx;
	}
	
	.img-info .info .c .p {
		left: 0;
	}

	.attr-pop .img {
		float: left;
		height: 177upx;
		width: 177upx;
		background: #f4f4f4;
		margin-right: 31.25upx;
	}

	.attr-pop .info {
		float: left;
		height: 177upx;
		width: 440upx;
		display: flex;
		align-items: center;
	}

	.attr-pop .p {
		font-size: 33upx;
		color: #333;
		height: 33upx;
		line-height: 33upx;
		margin-bottom: 10upx;
	}

	.attr-pop .a {
		font-size: 29upx;
		color: #333;
		height: 40upx;
		line-height: 40upx;
	}

	.spec-con {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.spec-con .name {
		height: 32upx;
		margin-bottom: 22upx;
		width: 150upx;
		display: flex;
		left: 0;
		left: 0;
		font-size: 29upx;
		color: #333;
	}

	.spec-con .values {
		height: auto;
		margin-bottom: 31.25upx;
		font-size: 0;
	}

	.spec-con .value {
		display: inline-block;
		height: 62upx;
		padding: 0 35upx;
		line-height: 56upx;
		text-align: center;
		margin-right: 25upx;
		margin-bottom: 16.5upx;
		border: 1px solid #333;
		font-size: 25upx;
		color: #333;
	}

	.spec-con .value.disable {
		border: 1px solid #ccc;
		color: #ccc;
	}

	.spec-con .value.selected {
		border: 1px solid #b4282d;
		color: #b4282d;
	}
	
	.number-item .name {
		width: 100upx;
		height: 20upx;
		display: flex;
		left: 0;
	}

	.number-item .selnum {
		width: 322upx;
		height: 71upx;
		border: 1px solid #ccc;
		display: flex;
	}

	.number-item .cut {
		width: 93.75upx;
		height: 100%;
		text-align: center;
		line-height: 65upx;
	}

	.number-item .number {
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 68.75upx;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		float: left;
	}

	.number-item .add {
		width: 93.75upx;
		height: 100%;
		text-align: center;
		line-height: 65upx;
	}

	/* .content-image {
		vertical-align: middle;

	} */

	.mask {
		position: fixed;
		width: 750upx;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}

	.popup {
		position: absolute;
		z-index: 999;
		background-color: #ffffff;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
	}

	.popup-middle {
		width: 400upx;
		height: 400upx;
		border-radius: 10upx;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	.popup-top {
		top: 0;
		width: 100%;
		height: 100upx;
		text-align: center;
	}

	.popup-top text {
		line-height: 100upx;
		margin-left: 20upx;
		font-size: 32upx;
	}

	.popup-bottom {
		bottom: 0;
		width: 100%;
		height: 100upx;
		text-align: center;
	}

	.popup-bottom text {
		line-height: 100upx;
		font-size: 32upx;
	}
	
	.good-detail image  {
		margin-top: -15upx;
	}
	
	.goods-info .name {
		width: 600upx;
	}
</style>
